<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>bom 与 dom | winnnntttter</title>
    <meta name="description" content="">
    <meta name="generator" content="VuePress 1.8.0">
    <link rel="icon" href="/favicon.ico">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/katex.min.css">
    <script>
      var _hmt = _hmt || [];
      (function() {
        var hm = document.createElement("script");
        hm.src = "https://hm.baidu.com/hm.js?7ae3e8df51439cebe7b2a43bccd0b253";
        var s = document.getElementsByTagName("script")[0]; 
        s.parentNode.insertBefore(hm, s);
      })();
      </script>
    <meta name="description" content="winnnntttter的个人站">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
    <link rel="preload" href="/assets/css/0.styles.a3a399df.css" as="style"><link rel="preload" href="/assets/js/app.419c42a0.js" as="script"><link rel="preload" href="/assets/js/3.2e7f4496.js" as="script"><link rel="preload" href="/assets/js/45.45af274c.js" as="script"><link rel="prefetch" href="/assets/js/10.bd166216.js"><link rel="prefetch" href="/assets/js/100.ef6c4e60.js"><link rel="prefetch" href="/assets/js/101.d01225fc.js"><link rel="prefetch" href="/assets/js/102.b85e1bb3.js"><link rel="prefetch" href="/assets/js/103.efa64f76.js"><link rel="prefetch" href="/assets/js/104.e62be1cd.js"><link rel="prefetch" href="/assets/js/105.4db56e9c.js"><link rel="prefetch" href="/assets/js/106.f6ccef65.js"><link rel="prefetch" href="/assets/js/11.705ff9c2.js"><link rel="prefetch" href="/assets/js/12.7f08fe83.js"><link rel="prefetch" href="/assets/js/13.c9276fff.js"><link rel="prefetch" href="/assets/js/14.03705b05.js"><link rel="prefetch" href="/assets/js/15.a39a18a1.js"><link rel="prefetch" href="/assets/js/16.ecd9a98c.js"><link rel="prefetch" href="/assets/js/17.cfa099fe.js"><link rel="prefetch" href="/assets/js/18.be92763c.js"><link rel="prefetch" href="/assets/js/19.8a4801fa.js"><link rel="prefetch" href="/assets/js/20.bfc1f073.js"><link rel="prefetch" href="/assets/js/21.08ea81e0.js"><link rel="prefetch" href="/assets/js/22.635463a2.js"><link rel="prefetch" href="/assets/js/23.fcf1e19e.js"><link rel="prefetch" href="/assets/js/24.e4fe2627.js"><link rel="prefetch" href="/assets/js/25.c64ebd97.js"><link rel="prefetch" href="/assets/js/26.b83aa917.js"><link rel="prefetch" href="/assets/js/27.9c0001f7.js"><link rel="prefetch" href="/assets/js/28.467acfc5.js"><link rel="prefetch" href="/assets/js/29.b88eaf80.js"><link rel="prefetch" href="/assets/js/30.79fca896.js"><link rel="prefetch" href="/assets/js/31.f0b09253.js"><link rel="prefetch" href="/assets/js/32.680d05e2.js"><link rel="prefetch" href="/assets/js/33.06db5f96.js"><link rel="prefetch" href="/assets/js/34.9b7ffb83.js"><link rel="prefetch" href="/assets/js/35.b302d83e.js"><link rel="prefetch" href="/assets/js/36.8ce84d21.js"><link rel="prefetch" href="/assets/js/37.8f1286d0.js"><link rel="prefetch" href="/assets/js/38.0eba62cc.js"><link rel="prefetch" href="/assets/js/39.9eafaf04.js"><link rel="prefetch" href="/assets/js/4.10fce449.js"><link rel="prefetch" href="/assets/js/40.94e167a7.js"><link rel="prefetch" href="/assets/js/41.9b634e18.js"><link rel="prefetch" href="/assets/js/42.a3ad7d5f.js"><link rel="prefetch" href="/assets/js/43.9ad38a47.js"><link rel="prefetch" href="/assets/js/44.1d5a8a2c.js"><link rel="prefetch" href="/assets/js/46.45a0da7e.js"><link rel="prefetch" href="/assets/js/47.e31b4c4f.js"><link rel="prefetch" href="/assets/js/48.2b1a4ffb.js"><link rel="prefetch" href="/assets/js/49.e4a82034.js"><link rel="prefetch" href="/assets/js/5.edc6b3fb.js"><link rel="prefetch" href="/assets/js/50.8b0a75d7.js"><link rel="prefetch" href="/assets/js/51.fb58d1f2.js"><link rel="prefetch" href="/assets/js/52.aba39728.js"><link rel="prefetch" href="/assets/js/53.d683a969.js"><link rel="prefetch" href="/assets/js/54.c91b9f4c.js"><link rel="prefetch" href="/assets/js/55.76d17213.js"><link rel="prefetch" href="/assets/js/56.5935f2ad.js"><link rel="prefetch" href="/assets/js/57.65d32203.js"><link rel="prefetch" href="/assets/js/58.0b637d75.js"><link rel="prefetch" href="/assets/js/59.4f569adb.js"><link rel="prefetch" href="/assets/js/6.fe59ecb4.js"><link rel="prefetch" href="/assets/js/60.3f56e6a2.js"><link rel="prefetch" href="/assets/js/61.a6beb596.js"><link rel="prefetch" href="/assets/js/62.db0af84e.js"><link rel="prefetch" href="/assets/js/63.1d585303.js"><link rel="prefetch" href="/assets/js/64.3861310e.js"><link rel="prefetch" href="/assets/js/65.9b1ef5df.js"><link rel="prefetch" href="/assets/js/66.dd5713f3.js"><link rel="prefetch" href="/assets/js/67.fa823bb5.js"><link rel="prefetch" href="/assets/js/68.ae4e8b4f.js"><link rel="prefetch" href="/assets/js/69.b36498fb.js"><link rel="prefetch" href="/assets/js/7.04e3d394.js"><link rel="prefetch" href="/assets/js/70.8f75877a.js"><link rel="prefetch" href="/assets/js/71.8b54fe2e.js"><link rel="prefetch" href="/assets/js/72.7892e629.js"><link rel="prefetch" href="/assets/js/73.41e6a3ad.js"><link rel="prefetch" href="/assets/js/74.a8d720c9.js"><link rel="prefetch" href="/assets/js/75.677c8235.js"><link rel="prefetch" href="/assets/js/76.9c7df0e7.js"><link rel="prefetch" href="/assets/js/77.1e4ef451.js"><link rel="prefetch" href="/assets/js/78.503ea59d.js"><link rel="prefetch" href="/assets/js/79.e473582d.js"><link rel="prefetch" href="/assets/js/8.35d757ca.js"><link rel="prefetch" href="/assets/js/80.71d04c61.js"><link rel="prefetch" href="/assets/js/81.36d69e64.js"><link rel="prefetch" href="/assets/js/82.9491f2b1.js"><link rel="prefetch" href="/assets/js/83.d9808b8b.js"><link rel="prefetch" href="/assets/js/84.e0231735.js"><link rel="prefetch" href="/assets/js/85.ddc29777.js"><link rel="prefetch" href="/assets/js/86.05cd7dc6.js"><link rel="prefetch" href="/assets/js/87.1e74cca5.js"><link rel="prefetch" href="/assets/js/88.957d6dbb.js"><link rel="prefetch" href="/assets/js/89.b216c556.js"><link rel="prefetch" href="/assets/js/9.07b2db50.js"><link rel="prefetch" href="/assets/js/90.0c71a3f2.js"><link rel="prefetch" href="/assets/js/91.038eb70a.js"><link rel="prefetch" href="/assets/js/92.f05b7ced.js"><link rel="prefetch" href="/assets/js/93.e1cd3406.js"><link rel="prefetch" href="/assets/js/94.fe506104.js"><link rel="prefetch" href="/assets/js/95.440323e0.js"><link rel="prefetch" href="/assets/js/96.9ee51a0b.js"><link rel="prefetch" href="/assets/js/97.826f8538.js"><link rel="prefetch" href="/assets/js/98.15cf8919.js"><link rel="prefetch" href="/assets/js/99.489906fc.js"><link rel="prefetch" href="/assets/js/vendors~docsearch.f879b1e1.js">
    <link rel="stylesheet" href="/assets/css/0.styles.a3a399df.css">
  </head>
  <body>
    <div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="ant-row"><div class="sidebar-button"><i aria-label="icon: bars" class="anticon anticon-bars"><svg viewBox="0 0 1024 1024" focusable="false" data-icon="bars" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M912 192H328c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h584c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm0 284H328c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h584c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm0 284H328c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h584c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zM104 228a56 56 0 1 0 112 0 56 56 0 1 0-112 0zm0 284a56 56 0 1 0 112 0 56 56 0 1 0-112 0zm0 284a56 56 0 1 0 112 0 56 56 0 1 0-112 0z"></path></svg></i> <span></span></div> <div class="ant-col ant-col-xs-24 ant-col-sm-24 ant-col-md-6 ant-col-lg-5 ant-col-xl-5 ant-col-xxl-4"><a href="/" class="router-link-active home-link"><img src="/logo.jpg" alt="winnnntttter" class="logo"> <span class="site-name">winnnntttter</span></a> <div class="search-box mobile-search"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div></div> <div class="ant-col ant-col-xs-0 ant-col-sm-0 ant-col-md-18 ant-col-lg-19 ant-col-xl-19 ant-col-xxl-20"><form id="search-form" role="search" class="algolia-search-wrapper search-box"><input id="algolia-search-input" class="search-query"></form> <nav class="nav-links can-hide"><ul role="menu" id="nav" class="ant-menu ant-menu-horizontal ant-menu-root ant-menu-light"><li role="menuitem" class="ant-menu-submenu ant-menu-submenu-horizontal ant-menu-overflowed-submenu" style="display:none;"><div aria-haspopup="true" class="ant-menu-submenu-title"><span>···</span><i class="ant-menu-submenu-arrow"></i></div></li><li role="menuitem" class="ant-menu-item"><a href="/" class="router-link-active">
          首页
        </a></li><li role="menuitem" class="ant-menu-submenu ant-menu-submenu-horizontal ant-menu-overflowed-submenu" style="display:none;"><div aria-haspopup="true" class="ant-menu-submenu-title"><span>···</span><i class="ant-menu-submenu-arrow"></i></div></li><li role="menuitem" class="ant-menu-submenu ant-menu-submenu-horizontal ant-menu-submenu-selected"><div aria-haspopup="true" class="ant-menu-submenu-title"><span>
          🍃前端
        </span><i class="ant-menu-submenu-arrow"></i></div></li><li role="menuitem" class="ant-menu-submenu ant-menu-submenu-horizontal ant-menu-overflowed-submenu" style="display:none;"><div aria-haspopup="true" class="ant-menu-submenu-title"><span>···</span><i class="ant-menu-submenu-arrow"></i></div></li><li role="menuitem" class="ant-menu-item"><a href="/Flutter/">
          🌿Flutter
        </a></li><li role="menuitem" class="ant-menu-submenu ant-menu-submenu-horizontal ant-menu-overflowed-submenu" style="display:none;"><div aria-haspopup="true" class="ant-menu-submenu-title"><span>···</span><i class="ant-menu-submenu-arrow"></i></div></li><li role="menuitem" class="ant-menu-submenu ant-menu-submenu-horizontal"><div aria-haspopup="true" class="ant-menu-submenu-title"><span>
          🌱其他
        </span><i class="ant-menu-submenu-arrow"></i></div></li><li role="menuitem" class="ant-menu-submenu ant-menu-submenu-horizontal ant-menu-overflowed-submenu" style="display:none;"><div aria-haspopup="true" class="ant-menu-submenu-title"><span>···</span><i class="ant-menu-submenu-arrow"></i></div></li><li role="menuitem" class="ant-menu-item"><a href="https://jsbin.com/" target="_blank">
          🏃‍♂️运行
          <i aria-label="icon: link" class="anticon anticon-link"><svg viewBox="64 64 896 896" focusable="false" data-icon="link" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M574 665.4a8.03 8.03 0 0 0-11.3 0L446.5 781.6c-53.8 53.8-144.6 59.5-204 0-59.5-59.5-53.8-150.2 0-204l116.2-116.2c3.1-3.1 3.1-8.2 0-11.3l-39.8-39.8a8.03 8.03 0 0 0-11.3 0L191.4 526.5c-84.6 84.6-84.6 221.5 0 306s221.5 84.6 306 0l116.2-116.2c3.1-3.1 3.1-8.2 0-11.3L574 665.4zm258.6-474c-84.6-84.6-221.5-84.6-306 0L410.3 307.6a8.03 8.03 0 0 0 0 11.3l39.7 39.7c3.1 3.1 8.2 3.1 11.3 0l116.2-116.2c53.8-53.8 144.6-59.5 204 0 59.5 59.5 53.8 150.2 0 204L665.3 562.6a8.03 8.03 0 0 0 0 11.3l39.8 39.8c3.1 3.1 8.2 3.1 11.3 0l116.2-116.2c84.5-84.6 84.5-221.5 0-306.1zM610.1 372.3a8.03 8.03 0 0 0-11.3 0L372.3 598.7a8.03 8.03 0 0 0 0 11.3l39.6 39.6c3.1 3.1 8.2 3.1 11.3 0l226.4-226.4c3.1-3.1 3.1-8.2 0-11.3l-39.5-39.6z"></path></svg></i></a></li><li role="menuitem" class="ant-menu-submenu ant-menu-submenu-horizontal ant-menu-overflowed-submenu" style="display:none;"><div aria-haspopup="true" class="ant-menu-submenu-title"><span>···</span><i class="ant-menu-submenu-arrow"></i></div></li><li role="menuitem" class="ant-menu-submenu ant-menu-submenu-horizontal"><div aria-haspopup="true" class="ant-menu-submenu-title"><span>
          🌈联系
        </span><i class="ant-menu-submenu-arrow"></i></div></li><li role="menuitem" class="ant-menu-submenu ant-menu-submenu-horizontal ant-menu-overflowed-submenu" style="visibility:hidden;position:absolute;"><div aria-haspopup="true" class="ant-menu-submenu-title"><span>···</span><i class="ant-menu-submenu-arrow"></i></div></li></ul> <a href="https://github.com/winnnntttter/winnnntttter.github.io" target="_blank" rel="noopener noreferrer" class="repo-link"><i aria-label="icon: github" class="anticon anticon-github"><svg viewBox="64 64 896 896" focusable="false" data-icon="github" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M511.6 76.3C264.3 76.2 64 276.4 64 523.5 64 718.9 189.3 885 363.8 946c23.5 5.9 19.9-10.8 19.9-22.2v-77.5c-135.7 15.9-141.2-73.9-150.3-88.9C215 726 171.5 718 184.5 703c30.9-15.9 62.4 4 98.9 57.9 26.4 39.1 77.9 32.5 104 26 5.7-23.5 17.9-44.5 34.7-60.8-140.6-25.2-199.2-111-199.2-213 0-49.5 16.3-95 48.3-131.7-20.4-60.5 1.9-112.3 4.9-120 58.1-5.2 118.5 41.6 123.2 45.3 33-8.9 70.7-13.6 112.9-13.6 42.4 0 80.2 4.9 113.5 13.9 11.3-8.6 67.3-48.8 121.3-43.9 2.9 7.7 24.7 58.3 5.5 118 32.4 36.8 48.9 82.7 48.9 132.3 0 102.2-59 188.1-200 212.9a127.5 127.5 0 0 1 38.1 91v112.5c.8 9 0 17.9 15 17.9 177.1-59.7 304.6-227 304.6-424.1 0-247.2-200.4-447.3-447.5-447.3z"></path></svg></i></a></nav></div></div> <!----></header> <aside class="sidebar"><!----> <ul class="sidebar-links"><li><a href="/front-end/js/" aria-current="page" title="js" class="sidebar-link">js</a></li><li><a href="/front-end/js/1.全选、函数参数、下拉框、五星评价.html" title="1.全选、函数参数、下拉框、五星评价" class="sidebar-link">1.全选、函数参数、下拉框、五星评价</a></li><li><a href="/front-end/js/10.面向对象、正则表达式.html" title="10.面向对象、正则表达式" class="sidebar-link">10.面向对象、正则表达式</a></li><li><a href="/front-end/js/11.web基本概念、ajax.html" title="11.web基本概念、ajax" class="sidebar-link">11.web基本概念、ajax</a></li><li><a href="/front-end/js/12.Array.reduce().html" title="12.Array.reduce()" class="sidebar-link">12.Array.reduce()</a></li><li><a href="/front-end/js/13.验证浏览器信息.html" title="13.验证浏览器信息" class="sidebar-link">13.验证浏览器信息</a></li><li><a href="/front-end/js/2.计时器、无缝滚动、选项卡、typeof 和instanceof.html" title="2.计时器、无缝滚动、选项卡、typeof 和instanceof" class="sidebar-link">2.计时器、无缝滚动、选项卡、typeof 和instanceof</a></li><li><a href="/front-end/js/3.各种width、拨号排列、马赛克tab、拖动、碰撞、模拟滚动条、放大镜.html" title="3.各种width、拨号排列、马赛克tab、拖动、碰撞、模拟滚动条、放大镜" class="sidebar-link">3.各种width、拨号排列、马赛克tab、拖动、碰撞、模拟滚动条、放大镜</a></li><li><a href="/front-end/js/4.拖动放大图片、图片中放大镜、页面返回和前进、滚动、错误提示.html" title="4.拖动放大图片、图片中放大镜、页面返回和前进、滚动、错误提示" class="sidebar-link">4.拖动放大图片、图片中放大镜、页面返回和前进、滚动、错误提示</a></li><li><a href="/front-end/js/5.插入表格、事件监听、事件源、贴标签、清除空白节点、仿mac、随机颜色、自定义右键菜单.html" title="5.插入表格、事件监听、事件源、贴标签、清除空白节点、仿mac、随机颜色、自定义右键菜单" class="sidebar-link">5.插入表格、事件监听、事件源、贴标签、清除空白节点、仿mac、随机颜色、自定义右键菜单</a></li><li><a href="/front-end/js/6.倒计时、日期、图片时钟、双色球、区分中英文计算字数、判断上下屏、星座、完整日历、作用域.html" title="6.倒计时、日期、图片时钟、双色球、区分中英文计算字数、判断上下屏、星座、完整日历、作用域" class="sidebar-link">6.倒计时、日期、图片时钟、双色球、区分中英文计算字数、判断上下屏、星座、完整日历、作用域</a></li><li><a href="/front-end/js/7.json数据、获取css样式、自运行函数、回调函数、闭包.html" title="7.json数据、获取css样式、自运行函数、回调函数、闭包" class="sidebar-link">7.json数据、获取css样式、自运行函数、回调函数、闭包</a></li><li><a href="/front-end/js/8.二级菜单、运动函数、侧边悬停、轮播图.html" title="8.二级菜单、运动函数、侧边悬停、轮播图" class="sidebar-link">8.二级菜单、运动函数、侧边悬停、轮播图</a></li><li><a href="/front-end/js/9.数据存储、js编译、穷举法买鸡.html" title="9.数据存储、js编译、穷举法买鸡" class="sidebar-link">9.数据存储、js编译、穷举法买鸡</a></li><li><a href="/front-end/js/blob和fileReader.html" title="blob和fileReader" class="sidebar-link">blob和fileReader</a></li><li><a href="/front-end/js/bom与dom.html" title="bom与dom" class="active sidebar-link">bom与dom</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/front-end/js/bom与dom.html#browser-对象" title="Browser 对象" class="sidebar-link">Browser 对象</a></li><li class="sidebar-sub-header"><a href="/front-end/js/bom与dom.html#html-dom-对象" title="HTML DOM 对象" class="sidebar-link">HTML DOM 对象</a></li><li class="sidebar-sub-header"><a href="/front-end/js/bom与dom.html#图层对象的-4-个属性" title="图层对象的 4 个属性" class="sidebar-link">图层对象的 4 个属性</a></li><li class="sidebar-sub-header"><a href="/front-end/js/bom与dom.html#直接引用结点" title="直接引用结点" class="sidebar-link">直接引用结点</a></li><li class="sidebar-sub-header"><a href="/front-end/js/bom与dom.html#间接引用结点-3-element-childnodes" title="间接引用结点 3. element.childNodes" class="sidebar-link">间接引用结点 3. element.childNodes</a></li><li class="sidebar-sub-header"><a href="/front-end/js/bom与dom.html#获得结点信息" title="获得结点信息" class="sidebar-link">获得结点信息</a></li><li class="sidebar-sub-header"><a href="/front-end/js/bom与dom.html#处理属性结点" title="处理属性结点" class="sidebar-link">处理属性结点</a></li><li class="sidebar-sub-header"><a href="/front-end/js/bom与dom.html#处理文本结点" title="处理文本结点" class="sidebar-link">处理文本结点</a></li><li class="sidebar-sub-header"><a href="/front-end/js/bom与dom.html#改变文档的层次结构" title="改变文档的层次结构" class="sidebar-link">改变文档的层次结构</a></li><li class="sidebar-sub-header"><a href="/front-end/js/bom与dom.html#表格的操作" title="表格的操作" class="sidebar-link">表格的操作</a></li><li class="sidebar-sub-header"><a href="/front-end/js/bom与dom.html#html-dom-element-对象" title="HTML DOM Element 对象" class="sidebar-link">HTML DOM Element 对象</a></li></ul></li><li><a href="/front-end/js/getParamName.html" title="getParamName" class="sidebar-link">getParamName</a></li><li><a href="/front-end/js/js内置对象.html" title="js内置对象" class="sidebar-link">js内置对象</a></li><li><a href="/front-end/js/xhr下载文件.html" title="xhr下载文件" class="sidebar-link">xhr下载文件</a></li><li><a href="/front-end/js/判断空对象.html" title="判断空对象" class="sidebar-link">判断空对象</a></li><li><a href="/front-end/js/原生加className，判断是否显示.html" title="原生加className，判断是否显示" class="sidebar-link">原生加className，判断是否显示</a></li><li><a href="/front-end/js/固定字数显示.html" title="固定字数显示" class="sidebar-link">固定字数显示</a></li><li><a href="/front-end/js/移动端适配.html" title="移动端适配" class="sidebar-link">移动端适配</a></li><li><a href="/front-end/js/获取服务器时间.html" title="获取服务器时间" class="sidebar-link">获取服务器时间</a></li></ul></aside> <main class="page"> <div class="theme-antdocs-content content__default"><h1 id="bom-与-dom"><a href="#bom-与-dom" class="header-anchor">#</a> bom 与 dom</h1> <h2 id="browser-对象"><a href="#browser-对象" class="header-anchor">#</a> Browser 对象</h2> <ul><li>Window</li> <li>Navigator</li> <li>Screen</li> <li>History</li> <li>Location</li></ul> <h2 id="html-dom-对象"><a href="#html-dom-对象" class="header-anchor">#</a> HTML DOM 对象</h2> <ul><li>DOM Document</li> <li>DOM Element</li> <li>DOM Attribute</li> <li>DOM Event</li></ul> <p>navigator 浏览器对象</p> <p>screen 屏幕对象</p> <p>window 窗口对象
--history 历史对象</p> <p>--location 地址对象</p> <p>--frames[]; Frame 框架对象</p> <p>--document 文档对象</p> <p>----anchors[]; links[]; Link 连接对象</p> <p>----applets[] Java 小程序对象</p> <p>----embeds[] 插件对象</p> <p>----forms[]; Form 表单对象</p> <p>--------Button 按钮对象</p> <p>--------Checkbox 复选框对象</p> <p>--------elements[]; Element 表单元素对象</p> <p>--------Hidden 隐藏对象</p> <p>--------Password 密码输入区对象</p> <p>--------Radio 单选域对象</p> <p>--------Reset 重置按钮对象</p> <p>--------Select 选择区（下拉菜单、列表）对象</p> <p>------------options[]; Option 选择项对象</p> <p>--------Submit 提交按钮对象</p> <p>--------Text 文本框对象</p> <p>--------Textarea 多行文本输入区对象</p> <p>----images[]; Image 图片对象</p> <p>Window 对象属性</p> <p>属性 描述</p> <p>closed 返回窗口是否已被关闭。</p> <p>defaultStatus 设置或返回窗口状态栏中的默认文本。</p> <p>document 对 Document 对象的只读引用。请参阅 Document 对象。</p> <p>history 对 History 对象的只读引用。请参数 History 对象。</p> <p>innerheight 返回窗口的文档显示区的高度。</p> <p>innerwidth 返回窗口的文档显示区的宽度。</p> <p>length 设置或返回窗口中的框架数量。</p> <p>location 用于窗口或框架的 Location 对象。请参阅 Location 对象。</p> <p>name 设置或返回窗口的名称。</p> <p>navigator 对 Navigator 对象的只读引用。请参数 Navigator 对象。</p> <p>opener 返回对创建此窗口的窗口的引用。</p> <p>outerheight 返回窗口的外部高度。</p> <p>outerwidth 返回窗口的外部宽度。</p> <p>pageXOffset 设置或返回当前页面相对于窗口显示区左上角的 X 位置。</p> <p>pageYOffset 设置或返回当前页面相对于窗口显示区左上角的 Y 位置。</p> <p>parent 返回父窗口。</p> <p>screen 对 Screen 对象的只读引用。请参数 Screen 对象。</p> <p>self 返回对当前窗口的引用。等价于 Window 属性。</p> <p>status 设置窗口状态栏的文本。</p> <p>top 返回最顶层的先辈窗口。</p> <p>window window 属性等价于 self 属性，它包含了对窗口自身的引用。</p> <p>screenLeft、screenTop、screenX、screenY
只读整数。声明了窗口的左上角在屏幕上的的 x 坐标和 y 坐标。IE、Safari 和 Opera 支持 screenLeft 和 screenTop，而 Firefox 和 Safari 支持 screenX 和 screenY。</p> <p>方法</p> <p>alert() 显示带有一段消息和一个确认按钮的警告框。</p> <p>blur() 把键盘焦点从顶层窗口移开。</p> <p>clearInterval() 取消由 setInterval() 设置的 timeout。</p> <p>clearTimeout() 取消由 setTimeout() 方法设置的 timeout。</p> <p>close() 关闭浏览器窗口。</p> <p>confirm() 显示带有一段消息以及确认按钮和取消按钮的对话框。</p> <p>createPopup() 创建一个 pop-up 窗口。</p> <p>focus() 把键盘焦点给予一个窗口。</p> <p>moveBy() 可相对窗口的当前坐标把它移动指定的像素。</p> <p>moveTo() 把窗口的左上角移动到一个指定的坐标。</p> <p>open() 打开一个新的浏览器窗口或查找一个已命名的窗口。</p> <p>print() 打印当前窗口的内容。</p> <p>prompt() 显示可提示用户输入的对话框。</p> <p>resizeBy() 按照指定的像素调整窗口的大小。</p> <p>resizeTo() 把窗口的大小调整到指定的宽度和高度。</p> <p>scrollBy() 按照指定的像素值来滚动内容。</p> <p>scrollTo() 把内容滚动到指定的坐标。</p> <p>setInterval() 按照指定的周期（以毫秒计）来调用函数或计算表达式。</p> <p>setTimeout() 在指定的毫秒数后调用函数或计算表达式。</p> <p>Window 对象描述</p> <p>Window 对象表示一个浏览器窗口或一个框架。在客户端 JavaScript 中，Window 对象是全局对象，所有的表达式都在当前的环境中计算。也就是说，要引用当前窗口根本不需要特殊的语法，可以把那个窗口的属性作为全局变量来使用。例如，可以只写 document，而不必写 window.document。</p> <p>同样，可以把当前窗口对象的方法当作函数来使用，如只写 alert()，而不必写 Window.alert()。</p> <p>除了上面列出的属性和方法，Window 对象还实现了核心 JavaScript 所定义的所有全局属性和方法。</p> <p>Window 对象的 window 属性和 self 属性引用的都是它自己。当你想明确地引用当前窗口，而不仅仅是隐式地引用它时，可以使用这两个属性。除了这两个属性之外，parent 属性、top 属性以及 frame[] 数组都引用了与当前 Window 对象相关的其他 Window 对象。</p> <p>要引用窗口中的一个框架，可以使用如下语法：</p> <div class="language-js extra-class"><pre class="language-js"><code>frame<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">;</span> <span class="token comment">//当前窗口的框架</span>
self<span class="token punctuation">.</span>frame<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">;</span> <span class="token comment">//当前窗口的框架</span>
w<span class="token punctuation">.</span>frame<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">;</span> <span class="token comment">//窗口 w 的框架</span>

<span class="token comment">// 要引用一个框架的父窗口（或父框架），可以使用下面的语法：</span>

parent<span class="token punctuation">;</span> <span class="token comment">//当前窗口的父窗口</span>
self<span class="token punctuation">.</span>parent<span class="token punctuation">;</span> <span class="token comment">//当前窗口的父窗口</span>
w<span class="token punctuation">.</span>parent<span class="token punctuation">;</span> <span class="token comment">//窗口 w 的父窗口</span>

<span class="token comment">// 要从顶层窗口含有的任何一个框架中引用它，可以使用如下语法：</span>

top<span class="token punctuation">;</span> <span class="token comment">//当前框架的顶层窗口</span>
self<span class="token punctuation">.</span>top<span class="token punctuation">;</span> <span class="token comment">//当前框架的顶层窗口</span>
f<span class="token punctuation">.</span>top<span class="token punctuation">;</span> <span class="token comment">//框架 f 的顶层窗口</span>
</code></pre></div><p>新的顶层浏览器窗口由方法 Window.open() 创建。当调用该方法时，应把 open() 调用的返回值存储在一个变量中，然后使用那个变量来引用新窗口。新窗口的 opener 属性反过来引用了打开它的那个窗口。</p> <p>一般来说，Window 对象的方法都是对浏览器窗口或框架进行某种操作。而 alert() 方法、confirm() 方法和 prompt 方法则不同，它们通过简单的对话框与用户进行交互。</p> <p>HHistory 对象简介</p> <p>History 对象包含用户（在浏览器窗口中）访问过的 URL。Window 对象的 history 属性就是对一个 History 对象的引用。出于隐私方面的原因，History 对象不再允许脚本访问已经访问过的实际 URL，唯一保持使用的功能只有 back()、forward()和 go()方法。</p> <p>History 对象属性</p> <p>Length</p> <p>返回浏览器历史列表的 URL 数量</p> <p>History 对象方法</p> <p>back()
加载历史列表中的前一个 URL（如果存在）。效果等价于点击后退按钮或者调用 history.go(-1)</p> <p>forward()
加载历史列表中的下一个 URL（如果存在）。效果等价于点击前进按钮或者调用 history.go(1)</p> <p>go(num|url)
加载历史列表中的某个具体页面。在 chrome，使用 url 无效！</p> <p>Location 对象简介</p> <p>Location 对象包含有关当前 URL 的信息。Window 对象的 location 属性就是对 Location 对象的引用。它的 href 属性存放的是文档完整的 url，其他属性则分别秒射了 URL 的各个部分。当一个 Location 对象被转换成字符串，返回的是 href 属性值。如果把一个含有 URL 的字符串富裕 Location 对象或者它的 href 属性，浏览器就会把新的 URL 所指的文档加载并显示出来。详细功能参见其属性和方法。
Location 对象属性</p> <p>hash
设置或返回从#开始的 URL。</p> <p>host
设置或返回主机名和当前 URL 的端口号</p> <p>hostname
设置或返回当前 URL 的主机名</p> <p>href
设置或返回完整的 URL。</p> <p>pathname
设置或返回当前 URL 的路径部分</p> <p>port
设置或者返回当前 URL 的端口号</p> <p>protocol
设置或者返回当前 URL 的协议</p> <p>search
设置或者返回从？开始的 URL（查询部分）</p> <p>Location 对象方法
assign(url)
加载一个新的文档。</p> <p>reload(flag)
如果该方法没有规定参数，或者参数是 false，它会用 http 头从 if-modified-since 来检测服务器上的文档是否已经改变。如果已经改变，则会再次下载该文档，否则从缓冲中装载文档，，效果与单机浏览器刷新按钮完全一样。若 flag 为 true，总会绕过缓存，从服务器上重新下载该文档，与按住 shift 和刷新按钮效果完全一样。</p> <p>replace(url)
该方法不会在 history 中生成一个新的记录，当使用该方法的时候，新的 url 将覆盖 history 中的当前记录。
其他
url=&quot;www.hao123.com&quot;和url=&quot;http://www.hao123.com&quot;是不一样的，前者是file protocol，后者是 http protocol，后者才能访问该网站。location.href=url、location.assign(url)等的测试可以得知。</p> <p>Navigator 对象</p> <p>Navigator 对象包含有关浏览器的信息，所有的浏览器都支持该对象。该对象的属性描述了正在使用的浏览器，可以使用这些属性进行平台专用的配置。该对象在 browser 里面是唯一的，可以用 Window 对象的 navigator 属性来引用它。</p> <p>Navigator 对象属性</p> <p>plugins
返回文档中所有插件对象的引用的一个数组。</p> <p>appCodeName
返回浏览器的代码名</p> <p>appMinorVersion
返回浏览器的次级版本。chrome 下为 undefined，IE11 为 0</p> <p>appName
返回浏览器的名称，只读。chrome 和 IE11 都为 Netscape</p> <p>appVersion
返回浏览器的平台和版本号，只读。</p> <p>browserLanguage
返回浏览器的语言。chrome：undefined。ie11:zh-CN</p> <p>cookieEnabled
返回是否启用 cookie。适用于 chrome 和 ie11</p> <p>cpuClass
返回浏览器系统的 cpu 等级。chrome：undefined。ie11：x86</p> <p>onLine
返回是否处于脱机模式。适用于 chrome 和 ie11</p> <p>platform
返回运行浏览器的操作系统平台。适用于 chrome 和 ie11</p> <p>systemLanguage
返回 OS 使用的默认语言。chrome：undefined。ie11：适用</p> <p>userAgent
返回由客户机发送服务器的 user-Agent 头部的值。适用于 chrome 和 ie11</p> <p>userLanguage
返回 OS 的自然语言设置。chrome：undefined。ie11：适用。</p> <p>框架与多窗口通信</p> <p>子窗口与父窗口
只有自身和使用 window.open 方法打开的窗口和才能被 JavaScript 访问,window.open 方法打开的窗口通过 window.opener 属性来访问父窗口。 而在 opener 窗口中，可以通过 window.open 方法的返回值来访问打开的窗口！</p> <p>框架</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// window.frames集合：// 在框架集或包含iframe标签的页面中，frames集合包含了对有框架中窗口的引用</span>
<span class="token function">alert</span><span class="token punctuation">(</span>frames<span class="token punctuation">.</span>length<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//框架的数目</span>
<span class="token function">alert</span><span class="token punctuation">(</span>frames<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">.</span>document<span class="token punctuation">.</span>body<span class="token punctuation">.</span>innerHTML<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//使用下标直接获取对框架中窗口的引用</span>
<span class="token comment">//不但可以使用下标，还可以使用frame标签的name属性</span>
<span class="token function">alert</span><span class="token punctuation">(</span>frames<span class="token punctuation">[</span><span class="token string">&quot;frame1&quot;</span><span class="token punctuation">]</span><span class="token punctuation">.</span>document<span class="token punctuation">.</span>title<span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token comment">// 在框架集中还可以使用ID来获取子窗口的引用</span>

<span class="token keyword">var</span> frame1 <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">&quot;frame1&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//这样只是获取了标签</span>
<span class="token keyword">var</span> frame1Win <span class="token operator">=</span> frame1<span class="token punctuation">.</span>contentWindow<span class="token punctuation">;</span> <span class="token comment">//frame对象的contentWindow包含了窗口的引用</span>
<span class="token comment">//还可以直接获取框架中document的引用</span>
<span class="token keyword">var</span> frameDoc <span class="token operator">=</span> frame1<span class="token punctuation">.</span>contentDocument<span class="token punctuation">;</span>
<span class="token function">alert</span><span class="token punctuation">(</span>frameDoc<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//但IE不支持contentDocument属性</span>

<span class="token comment">// 子窗口访问父窗口——window对象的parent属性</span>
<span class="token comment">// 子窗口访问顶层——window对象的top属性</span>
</code></pre></div><p>Document 对象集合</p> <div class="language-js extra-class"><pre class="language-js"><code>all<span class="token punctuation">[</span><span class="token punctuation">]</span>	       <span class="token comment">//提供对文档中所有 HTML 元素的访问。</span>
anchors<span class="token punctuation">[</span><span class="token punctuation">]</span>      <span class="token comment">//返回对文档中所有 Anchor 对象的引用。</span>
applets	     <span class="token comment">//  返回对文档中所有 Applet 对象的引用。</span>
forms<span class="token punctuation">[</span><span class="token punctuation">]</span>	       <span class="token comment">//返回对文档中所有 Form 对象引用。</span>
images<span class="token punctuation">[</span><span class="token punctuation">]</span>       <span class="token comment">//返回对文档中所有 Image 对象引用。</span>
links<span class="token punctuation">[</span><span class="token punctuation">]</span>	     <span class="token comment">//  返回对文档中所有 Area 和 Link 对象引用。</span>
styleSheets<span class="token punctuation">[</span><span class="token punctuation">]</span>  <span class="token comment">//返回文档中所有引入的样式表的集合</span>
scripts<span class="token punctuation">[</span><span class="token punctuation">]</span>      <span class="token comment">//返回文档中所有的&lt;script&gt;标签的集合</span>



<span class="token comment">// 对象属性</span>
document<span class="token punctuation">.</span>title              <span class="token comment">//设置文档标题等价于HTML的title标签</span>
document<span class="token punctuation">.</span>bgColor            <span class="token comment">//设置页面背景色</span>
document<span class="token punctuation">.</span>fgColor            <span class="token comment">//设置前景色(文本颜色)</span>
document<span class="token punctuation">.</span>linkColor          <span class="token comment">//未点击过的链接颜色</span>
document<span class="token punctuation">.</span>alinkColor         <span class="token comment">//激活链接(焦点在此链接上)的颜色</span>
document<span class="token punctuation">.</span>vlinkColor         <span class="token comment">//已点击过的链接颜色</span>
document<span class="token punctuation">.</span><span class="token constant">URL</span>                <span class="token comment">//设置URL属性从而在同一窗口打开另一网页</span>
document<span class="token punctuation">.</span>fileCreatedDate    <span class="token comment">//文件建立日期，只读属性</span>
document<span class="token punctuation">.</span>fileModifiedDate   <span class="token comment">//文件修改日期，只读属性</span>
document<span class="token punctuation">.</span>fileSize           <span class="token comment">//文件大小，只读属性</span>
document<span class="token punctuation">.</span>cookie             <span class="token comment">//设置和读出cookie</span>
document<span class="token punctuation">.</span>charset            <span class="token comment">//设置字符集 简体中文:gb2312</span>
<span class="token comment">// 常用对象方法</span>
document<span class="token punctuation">.</span><span class="token function">write</span><span class="token punctuation">(</span><span class="token punctuation">)</span>                 <span class="token comment">//动态向页面写入内容</span>
document<span class="token punctuation">.</span><span class="token function">createElement</span><span class="token punctuation">(</span>Tag<span class="token punctuation">)</span>      <span class="token comment">//创建一个html标签对象</span>
document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token constant">ID</span><span class="token punctuation">)</span>      <span class="token comment">//获得指定ID值的对象</span>
document<span class="token punctuation">.</span><span class="token function">getElementsByName</span><span class="token punctuation">(</span>Name<span class="token punctuation">)</span> <span class="token comment">//获得指定Name值的对象</span>
document<span class="token punctuation">.</span>body<span class="token punctuation">.</span><span class="token function">appendChild</span><span class="token punctuation">(</span>oTag<span class="token punctuation">)</span>


<span class="token comment">// body-主体子对象</span>
document<span class="token punctuation">.</span>body                   <span class="token comment">//指定文档主体的开始和结束等价于body&gt;/body&gt;</span>
document<span class="token punctuation">.</span>body<span class="token punctuation">.</span>bgColor           <span class="token comment">//设置或获取对象后面的背景颜色</span>
document<span class="token punctuation">.</span>body<span class="token punctuation">.</span>link              <span class="token comment">//未点击过的链接颜色</span>
document<span class="token punctuation">.</span>body<span class="token punctuation">.</span>alink             <span class="token comment">//激活链接(焦点在此链接上)的颜色</span>
document<span class="token punctuation">.</span>body<span class="token punctuation">.</span>vlink             <span class="token comment">//已点击过的链接颜色</span>
document<span class="token punctuation">.</span>body<span class="token punctuation">.</span>text              <span class="token comment">//文本色</span>
document<span class="token punctuation">.</span>body<span class="token punctuation">.</span>innerText         <span class="token comment">//设置body&gt;…/body&gt;之间的文本</span>
document<span class="token punctuation">.</span>body<span class="token punctuation">.</span>innerHTML         <span class="token comment">//设置body&gt;…/body&gt;之间的HTML代码</span>
document<span class="token punctuation">.</span>body<span class="token punctuation">.</span>topMargin         <span class="token comment">//页面上边距</span>
document<span class="token punctuation">.</span>body<span class="token punctuation">.</span>leftMargin        <span class="token comment">//页面左边距</span>
document<span class="token punctuation">.</span>body<span class="token punctuation">.</span>rightMargin       <span class="token comment">//页面右边距</span>
document<span class="token punctuation">.</span>body<span class="token punctuation">.</span>bottomMargin      <span class="token comment">//页面下边距</span>
document<span class="token punctuation">.</span>body<span class="token punctuation">.</span>background        <span class="token comment">//背景图片</span>

<span class="token comment">// 常用对象事件</span>
document<span class="token punctuation">.</span>body<span class="token punctuation">.</span>onclick<span class="token comment">//鼠标指针单击对象是触发</span>
document<span class="token punctuation">.</span>body<span class="token punctuation">.</span>onmouseover <span class="token comment">//鼠标指针移到对象时触发</span>
document<span class="token punctuation">.</span>body<span class="token punctuation">.</span>onmouseout <span class="token comment">//鼠标指针移出对象时触发</span>
<span class="token comment">// location-位置子对象</span>

document<span class="token punctuation">.</span>location<span class="token punctuation">.</span>hash         <span class="token comment">// #号后的部分</span>
document<span class="token punctuation">.</span>location<span class="token punctuation">.</span>host         <span class="token comment">// 域名+端口号</span>
document<span class="token punctuation">.</span>location<span class="token punctuation">.</span>hostname     <span class="token comment">// 域名</span>
document<span class="token punctuation">.</span>location<span class="token punctuation">.</span>href         <span class="token comment">// 完整URL</span>
document<span class="token punctuation">.</span>location<span class="token punctuation">.</span>pathname     <span class="token comment">// 目录部分</span>
document<span class="token punctuation">.</span>location<span class="token punctuation">.</span>port         <span class="token comment">// 端口号</span>
document<span class="token punctuation">.</span>location<span class="token punctuation">.</span>protocol     <span class="token comment">// 网络协议(http:)</span>
document<span class="token punctuation">.</span>location<span class="token punctuation">.</span>search       <span class="token comment">// ?号后的部分</span>
documeny<span class="token punctuation">.</span>location<span class="token punctuation">.</span><span class="token function">reload</span><span class="token punctuation">(</span><span class="token punctuation">)</span>     <span class="token comment">//刷新网页</span>
document<span class="token punctuation">.</span>location<span class="token punctuation">.</span><span class="token function">reload</span><span class="token punctuation">(</span><span class="token constant">URL</span><span class="token punctuation">)</span>  <span class="token comment">//打开新的网页</span>
document<span class="token punctuation">.</span>location<span class="token punctuation">.</span><span class="token function">assign</span><span class="token punctuation">(</span><span class="token constant">URL</span><span class="token punctuation">)</span>  <span class="token comment">//打开新的网页</span>
document<span class="token punctuation">.</span>location<span class="token punctuation">.</span><span class="token function">replace</span><span class="token punctuation">(</span><span class="token constant">URL</span><span class="token punctuation">)</span> <span class="token comment">//打开新的网页</span>

———————————————————————
<span class="token comment">// selection-选区子对象</span>
<span class="token comment">// document.selection</span>
———————————————————————

<span class="token comment">// images集合(页面中的图象)</span>

<span class="token comment">// a)通过集合引用</span>
document<span class="token punctuation">.</span>images <span class="token comment">//对应页面上的img标签</span>
document<span class="token punctuation">.</span>images<span class="token punctuation">.</span>length <span class="token comment">//对应页面上img标签的个数</span>
document<span class="token punctuation">.</span>images<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span> <span class="token comment">//第1个img标签</span>
document<span class="token punctuation">.</span>images<span class="token punctuation">[</span>i<span class="token punctuation">]</span> <span class="token comment">//第i-1个img标签</span>

<span class="token comment">// b)通过name属性直接引用</span>
img name<span class="token operator">=</span><span class="token string">&quot;oImage&quot;</span>
document<span class="token punctuation">.</span>images<span class="token punctuation">.</span>oImage <span class="token comment">//document.images.name属性</span>

<span class="token comment">// c)引用图片的src属性</span>
document<span class="token punctuation">.</span>images<span class="token punctuation">.</span>oImage<span class="token punctuation">.</span>src <span class="token comment">//document.images.name属性.src</span>

<span class="token comment">// d)创建一个图象</span>
<span class="token keyword">var</span> oImage
oImage <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Image</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
document<span class="token punctuation">.</span>images<span class="token punctuation">.</span>oImage<span class="token punctuation">.</span>src<span class="token operator">=</span><span class="token string">&quot;1.jpg&quot;</span>
<span class="token comment">// 同时在页面上建立一个img /标签与之对应就可以显示</span>
</code></pre></div><p>———————————————————————-</p> <p>forms 集合(页面中的表单)</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// a)通过集合引用</span>
document<span class="token punctuation">.</span>forms<span class="token punctuation">;</span> <span class="token comment">//对应页面上的form标签</span>
document<span class="token punctuation">.</span>forms<span class="token punctuation">.</span>length<span class="token punctuation">;</span> <span class="token comment">//对应页面上/formform标签的个数</span>
document<span class="token punctuation">.</span>forms<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">;</span> <span class="token comment">//第1个/form标签</span>
document<span class="token punctuation">.</span>forms<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">;</span> <span class="token comment">//第i-1个/form标签</span>
document<span class="token punctuation">.</span>forms<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">.</span>length<span class="token punctuation">;</span> <span class="token comment">//第i-1个/form中的控件数</span>
document<span class="token punctuation">.</span>forms<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">.</span>elements<span class="token punctuation">[</span>j<span class="token punctuation">]</span><span class="token punctuation">;</span> <span class="token comment">//第i-1个/form中第j-1个控件</span>

<span class="token comment">// b)通过标签 name 属性直接引用</span>

<span class="token comment">// /formform name=”Myform”&gt;input name=”myctrl”/&gt;/form</span>
document<span class="token punctuation">.</span>Myform<span class="token punctuation">.</span>myctrl<span class="token punctuation">;</span> <span class="token comment">//document.表单名.控件名</span>

<span class="token comment">// c)访问表单的属性</span>

document<span class="token punctuation">.</span>forms<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">.</span>name<span class="token punctuation">;</span> <span class="token comment">//对应form name&gt;属性</span>
document<span class="token punctuation">.</span>forms<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">.</span>action<span class="token punctuation">;</span> <span class="token comment">//对应/formform action&gt;属性</span>
document<span class="token punctuation">.</span>forms<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">.</span>encoding<span class="token punctuation">;</span> <span class="token comment">//对应/formform enctype&gt;属性</span>
document<span class="token punctuation">.</span>forms<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">.</span>target<span class="token punctuation">;</span> <span class="token comment">//对应/formform target&gt;属性</span>
</code></pre></div><h2 id="图层对象的-4-个属性"><a href="#图层对象的-4-个属性" class="header-anchor">#</a> 图层对象的 4 个属性</h2> <p>document.getElementById(”ID”).innerText //动态输出文本
document.getElementById(”ID”).innerHTML //动态输出 HTML
document.getElementById(”ID”).outerText //同 innerText
document.getElementById(”ID”).outerHTML //同 innerHTML</p> <p>什么是 DOM，DOM 其实就是把一个 HTML 或者 XML 等符合 W3C 标准的文档内容模拟成一个 JAVA 对象，这样才能给 JAVA 或者 JS 来操作。</p> <p>下面是 JS 中模拟出的内置 DOM 对象 document 的属性和方法  （同样，JAVA 中也有对应的 DOM 类，并且更强大）</p> <p>属性：childNodes  //返回所有子元素的数组</p> <p>属性：fristChild   //第一个下级元素</p> <p>属性：lastChild   //最后一个下级元素</p> <p>属性：nextSibling  //下一个元素</p> <p>属性：previousSibling //上一个元素</p> <p>属性：nodeValue //指定元素的读写属性</p> <p>属性：parentNode  //返回元素的父节点</p> <p>注释：Internet Explorer 会忽略节点之间生成的空白文本节点（比如换行字符），而 Mozilla 不这么做。因此，在下面的例子中，我们用一个函数来检测上一个同级节点的节点类型。
元素节点的节点类型是 1，因此假如上一个同级节点不是元素节点，则移动到上一个节点，并检测该节点是否是元素节点。这个过程一直持续到找到上一个同级节点为止。这种方法可以确保在 Internet Explorer 和 Mozilla 都获得正确的结果。
如需更多有关 IE 与 Mozilla 浏览器差异的内容，请访问 W3School 的 XML DOM 教程中的 DOM 浏览器 这一节。</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">function</span> <span class="token function">get_previoussibling</span><span class="token punctuation">(</span><span class="token parameter">n</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">var</span> x <span class="token operator">=</span> n<span class="token punctuation">.</span>previousSibling<span class="token punctuation">;</span>
  <span class="token keyword">while</span> <span class="token punctuation">(</span>x<span class="token punctuation">.</span>nodeType <span class="token operator">!=</span> <span class="token number">1</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    x <span class="token operator">=</span> x<span class="token punctuation">.</span>previousSibling<span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
  <span class="token keyword">return</span> x<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><h2 id="直接引用结点"><a href="#直接引用结点" class="header-anchor">#</a> 直接引用结点</h2> <ol><li><p>document.getElementById(id);
--在文档里面通过 id 来找结点</p></li> <li><p>document.getElementByTagName(tagName);
--返回一个数组，包含对这些结点的引用
--如：document.getElementByTagName(&quot;span&quot;);将返回所有类型为 span 的结点</p></li></ol> <h2 id="间接引用结点-3-element-childnodes"><a href="#间接引用结点-3-element-childnodes" class="header-anchor">#</a> 间接引用结点 3. element.childNodes</h2> <p>--返回 element 的所有子结点,可以用 element.childNodes[i]的方式来调用
--element.firstChild=element.childNodes[0];
--element.lastChild=element.childNodes[element.childNonts.length-1];</p> <ol start="4"><li><p>element.parentNode
--引用父结点</p></li> <li><p>element.nextSibling; //引用下一个兄弟结点
element.previousSibling; //引用上一个兄弟结点</p></li></ol> <h2 id="获得结点信息"><a href="#获得结点信息" class="header-anchor">#</a> 获得结点信息</h2> <ol start="6"><li><p>nodeName 属性获得结点名称
--对于元素结点返回的是标记名称,如：<a herf=""></a>返回的是&quot;a&quot;
--对于属性结点返回的是属性名称,如：class=&quot;test&quot; 返回的是 test
--对于文本结点返回的是文本的内容</p></li> <li><p>nodeType 返回结点的类型
--元素结点返回 1
--属性结点返回 2
--文本结点返回 3</p></li> <li><p>nodeValue 返回结点的值
--元素结点返回 null
--属性结点返回 undefined
--文本结点返回文本内容</p></li> <li><p>hasChildNodes()判断是否有子结点</p></li> <li><p>tagName 属性返回元素的标记名称
--这个属性只有元素结点才有，等同于元素结点的 nodeName 属性</p></li></ol> <h2 id="处理属性结点"><a href="#处理属性结点" class="header-anchor">#</a> 处理属性结点</h2> <p>11.每个属性结点都是元素结点的一个属性，可以通过(元素结点.属性名称)访问</p> <p>12.利用 setAttribute()方法给元素结点添加属性</p> <p>--elementNode.setAttribute(属性名,属性值);</p> <p>13.使用 getAttribute()方法获得属性值</p> <p>--elementNode.getAttribute(属性名);</p> <h2 id="处理文本结点"><a href="#处理文本结点" class="header-anchor">#</a> 处理文本结点</h2> <p>14.innerHTML 和 innerText 属性，这两个方法相信大家都很熟悉,不介绍了,值得注意的是无论是 ie 还是 firefox 都容易把空格、换行、制表符等当成文本结点。所有一般通过 element.childNodes[i]引用文本结点的时候，一般要处理：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">function</span> <span class="token function">cleanWhitespace</span><span class="token punctuation">(</span><span class="token parameter">element</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">var</span> i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> i <span class="token operator">&lt;</span> element<span class="token punctuation">.</span>childNotes<span class="token punctuation">.</span>length<span class="token punctuation">;</span> i<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">var</span> node <span class="token operator">=</span> element<span class="token punctuation">.</span>childNodes<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">;</span>
    <span class="token keyword">if</span> <span class="token punctuation">(</span>node<span class="token punctuation">.</span>nodeType <span class="token operator">==</span> <span class="token number">3</span> <span class="token operator">&amp;&amp;</span> <span class="token operator">!</span><span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\S</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">.</span><span class="token function">test</span><span class="token punctuation">(</span>node<span class="token punctuation">.</span>nodeValue<span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      node<span class="token punctuation">.</span>parentNode<span class="token punctuation">.</span><span class="token function">removeChild</span><span class="token punctuation">(</span>node<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre></div><h2 id="改变文档的层次结构"><a href="#改变文档的层次结构" class="header-anchor">#</a> 改变文档的层次结构</h2> <p>15.document.createElement()方法创建元素结点
--如：document.createElement(&quot;Span&quot;);</p> <p>16.document.createTextNode()方法创建文本结点
--如：document.createTextNode(&quot; &quot;); //注:他不会通过 html 编码，也就是说这里创建的不是空格，而是字符串 </p> <p>17.使用 appendChild()方法添加结点
--parentElement.appendChild(childElement);</p> <p>18.使用 insertBefore()方法插入子节点
--parentNode.insertBefore(newNode,referenceNode);
--newNode 为插入的节点，referenceNode 为将插入的节点插入到这之前</p> <p>19.使用 replaceChild()方法取代子结点
--parentNode.replaceChild(newNode,oldNode);
--注：oldNode 必须是 parentNode 的子结点,</p> <p>20.使用 cloneNode()方法复制结点
--node.cloneNode(includeChildren);
--includeChildren 为 bool，表示是否复制其子结点</p> <p>21.使用 removeChild()方法删除子结点
--parentNode.removeChild(childNode);</p> <h2 id="表格的操作"><a href="#表格的操作" class="header-anchor">#</a> 表格的操作</h2> <p>--注：ie 中无法直接将一个完整的表格结点插入到文档中</p> <p>22.添加行和单元格</p> <div class="language- extra-class"><pre class="language-text"><code>      var _table=document.createElement(&quot;table&quot;);   //创建表
      table.insertRow(i);                  //在table的第i行插入行
      row.insertCell(i);                     //在row的第i个位置插入单元格
</code></pre></div><p>23.引用单元格对象
--table.rows[i].cells[i];</p> <p>24.删除行和单元格
--table.deleteRow(index);
--row.deleteCell(index);</p> <p>25.交换两行获得两个单元格的位置
node1.swapNode(node2);
--这个方法在 firefox 中将出错
通用方法：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">function</span> <span class="token function">swapNode</span><span class="token punctuation">(</span><span class="token parameter">node1<span class="token punctuation">,</span> node2</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">var</span> _parent <span class="token operator">=</span> node1<span class="token punctuation">.</span>parentNode<span class="token punctuation">;</span>
  <span class="token keyword">var</span> _t1 <span class="token operator">=</span> node1<span class="token punctuation">.</span>nextSubling<span class="token punctuation">;</span>
  <span class="token keyword">var</span> _t2 <span class="token operator">=</span> node2<span class="token punctuation">.</span>nextSubling<span class="token punctuation">;</span>
  <span class="token keyword">if</span> <span class="token punctuation">(</span>_t1<span class="token punctuation">)</span> parent<span class="token punctuation">.</span><span class="token function">insertBefore</span><span class="token punctuation">(</span>node2<span class="token punctuation">,</span> _t1<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token keyword">else</span> _parent<span class="token punctuation">.</span><span class="token function">appendChild</span><span class="token punctuation">(</span>node2<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token keyword">if</span> <span class="token punctuation">(</span>_t2<span class="token punctuation">)</span> parent<span class="token punctuation">.</span><span class="token function">insertBefore</span><span class="token punctuation">(</span>node1<span class="token punctuation">,</span> _t2<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token keyword">else</span> _parent<span class="token punctuation">.</span><span class="token function">appendChild</span><span class="token punctuation">(</span>node1<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><h2 id="html-dom-element-对象"><a href="#html-dom-element-对象" class="header-anchor">#</a> HTML DOM Element 对象</h2> <p>HTML DOM 节点</p> <p>在 HTML DOM （文档对象模型）中，每个部分都是节点：</p> <p>文档本身是文档节点</p> <p>所有 HTML 元素是元素节点</p> <p>所有 HTML 属性是属性节点</p> <p>HTML 元素内的文本是文本节点</p> <p>注释是注释节点</p> <p>Element 对象</p> <p>在 HTML DOM 中，Element 对象表示 HTML 元素。</p> <p>Element 对象可以拥有类型为元素节点、文本节点、注释节点的子节点。</p> <p>NodeList 对象表示节点列表，比如 HTML 元素的子节点集合。</p> <p>元素也可以拥有属性。属性是属性节点（参见下一节）。</p> <p>所有浏览器都支持 Element 对象和 NodeList 对象。</p> <p>属性和方法</p> <p>下面的属性和方法可用于所有 HTML 元素上：</p> <p>属性</p> <div class="language-js extra-class"><pre class="language-js"><code>描述<span class="token punctuation">;</span>
element<span class="token punctuation">.</span>accessKey<span class="token punctuation">;</span> <span class="token comment">//设置或返回元素的快捷键。</span>
element<span class="token punctuation">.</span>attributes<span class="token punctuation">;</span> <span class="token comment">//    返回元素属性的 NamedNodeMap。</span>
element<span class="token punctuation">.</span>childNodes<span class="token punctuation">;</span> <span class="token comment">//  返回元素子节点的 NodeList。</span>
element<span class="token punctuation">.</span>className<span class="token punctuation">;</span> <span class="token comment">// 设置或返回元素的 class 属性。</span>
element<span class="token punctuation">.</span>clientHeight<span class="token punctuation">;</span> <span class="token comment">//返回元素的可见高度。大部分浏览器对 clientHeight 都没有什么异议，都认为是内容可视区域的高度，也就是说页面浏览器中可以看到内容的这个区域的高度，即然是指可看到内容的区域，滚动条不算在内。但要注意padding是算在内。其计算方式为clientHeight = topPadding + bottomPadding+ height - scrollbar.height。</span>

element<span class="token punctuation">.</span>clientWidth<span class="token punctuation">;</span> <span class="token comment">//返回元素的可见宽度。</span>
element<span class="token punctuation">.</span>contentEditable<span class="token punctuation">;</span> <span class="token comment">//设置或返回元素的文本方向。</span>
element<span class="token punctuation">.</span>dir<span class="token punctuation">;</span> <span class="token comment">//设置或返回元素的文本方向。</span>
element<span class="token punctuation">.</span>firstChild<span class="token punctuation">;</span> <span class="token comment">// 返回元素的首个子。</span>
element<span class="token punctuation">.</span>id<span class="token punctuation">;</span> <span class="token comment">//设置或返回元素的 id。</span>
element<span class="token punctuation">.</span>innerHTML<span class="token punctuation">;</span> <span class="token comment">//设置或返回元素的内容。</span>
element<span class="token punctuation">.</span>isContentEditable<span class="token punctuation">;</span> <span class="token comment">//设置或返回元素的内容。</span>
element<span class="token punctuation">.</span>lang<span class="token punctuation">;</span> <span class="token comment">//设置或返回元素的语言代码。</span>
element<span class="token punctuation">.</span>lastChild<span class="token punctuation">;</span> <span class="token comment">//返回元素的最后一个子元素。</span>
element<span class="token punctuation">.</span>namespaceURI<span class="token punctuation">;</span> <span class="token comment">//返回元素的 namespace URI。</span>
element<span class="token punctuation">.</span>nextSibling<span class="token punctuation">;</span> <span class="token comment">//返回位于相同节点树层级的下一个节点。</span>
element<span class="token punctuation">.</span>nodeName<span class="token punctuation">;</span> <span class="token comment">//返回元素的名称。</span>
element<span class="token punctuation">.</span>nodeType<span class="token punctuation">;</span> <span class="token comment">//返回元素的节点类型。</span>
element<span class="token punctuation">.</span>nodeValue<span class="token punctuation">;</span> <span class="token comment">//设置或返回元素值。</span>
element<span class="token punctuation">.</span>offsetHeight<span class="token punctuation">;</span> <span class="token comment">// 返回元素的高度。在IE6，IE7，IE8以及最新的的FF, Chrome中，在元素上都是offsetHeight = clientHeight + 滚动条 + 边框。</span>
element<span class="token punctuation">.</span>offsetWidth<span class="token punctuation">;</span> <span class="token comment">//返回元素的宽度。</span>
element<span class="token punctuation">.</span>offsetLeft<span class="token punctuation">;</span> <span class="token comment">//返回元素的水平偏移位置。</span>
element<span class="token punctuation">.</span>offsetParent<span class="token punctuation">;</span> <span class="token comment">//返回元素的偏移容器。</span>
element<span class="token punctuation">.</span>offsetTop<span class="token punctuation">;</span> <span class="token comment">//返回元素的垂直偏移位置。</span>
element<span class="token punctuation">.</span>ownerDocument<span class="token punctuation">;</span> <span class="token comment">//返回元素的根元素（文档对象）。</span>
element<span class="token punctuation">.</span>parentNode<span class="token punctuation">;</span> <span class="token comment">//返回元素的父节点。</span>
element<span class="token punctuation">.</span>previousSibling<span class="token punctuation">;</span> <span class="token comment">//返回位于相同节点树层级的前一个元素。</span>
element<span class="token punctuation">.</span>scrollHeight<span class="token punctuation">;</span> <span class="token comment">//     返回元素的整体高度。scrollHeight是元素的padding加元素内容的高度。这个高度与滚动条无关，是内容的实际高度。计算方式 ：scrollHeight = topPadding + bottomPadding + 内容margix box的高度。</span>
element<span class="token punctuation">.</span>scrollLeft<span class="token punctuation">;</span> <span class="token comment">//   返回元素左边缘与视图之间的距离。</span>
element<span class="token punctuation">.</span>scrollTop<span class="token punctuation">;</span> <span class="token comment">//返回元素上边缘与视图之间的距离。</span>
element<span class="token punctuation">.</span>scrollWidth<span class="token punctuation">;</span> <span class="token comment">//返回元素的整体宽度。</span>
element<span class="token punctuation">.</span>style<span class="token punctuation">;</span> <span class="token comment">//设置或返回元素的 style 属性。</span>
element<span class="token punctuation">.</span>tabIndex<span class="token punctuation">;</span> <span class="token comment">//设置或返回元素的 tab 键控制次序。</span>
element<span class="token punctuation">.</span>tagName<span class="token punctuation">;</span> <span class="token comment">//返回元素的标签名。</span>
element<span class="token punctuation">.</span>textContent<span class="token punctuation">;</span> <span class="token comment">//设置或返回节点及其后代的文本内容。</span>
element<span class="token punctuation">.</span>title<span class="token punctuation">;</span> <span class="token comment">// 设置或返回元素的 title 属性。</span>
nodelist<span class="token punctuation">.</span>length<span class="token punctuation">;</span> <span class="token comment">//返回 NodeList 中的节点数。</span>
</code></pre></div><p>方法</p> <div class="language-js extra-class"><pre class="language-js"><code>element<span class="token punctuation">.</span><span class="token function">appendChild</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 向元素添加新的子节点，作为最后一个子节点。</span>
element<span class="token punctuation">.</span><span class="token function">insertBefore</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//在指定的已有的子节点之前插入新节点。</span>
element<span class="token punctuation">.</span><span class="token function">cloneNode</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//克隆元素。</span>
element<span class="token punctuation">.</span><span class="token function">compareDocumentPosition</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//比较两个元素的文档位置。</span>
element<span class="token punctuation">.</span><span class="token function">getAttribute</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//返回元素节点的指定属性值。</span>
element<span class="token punctuation">.</span><span class="token function">getAttributeNode</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//返回指定的属性节点。</span>
element<span class="token punctuation">.</span><span class="token function">getElementsByTagName</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//返回拥有指定标签名的所有子元素的集合。</span>
element<span class="token punctuation">.</span><span class="token function">getFeature</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//返回实现了指定特性的 API 的某个对象。</span>
element<span class="token punctuation">.</span><span class="token function">getUserData</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//返回关联元素上键的对象。</span>
element<span class="token punctuation">.</span><span class="token function">hasAttribute</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//如果元素拥有指定属性，则返回true，否则返回 false。</span>
element<span class="token punctuation">.</span><span class="token function">hasAttributes</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 如果元素拥有属性，则返回 true，否则返回 false。</span>
element<span class="token punctuation">.</span><span class="token function">hasChildNodes</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//如果元素拥有子节点(包括文本)，则返回 true，否则 false。</span>
element<span class="token punctuation">.</span><span class="token function">isDefaultNamespace</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//如果指定的 namespaceURI 是默认的，则返回 true，否则返回 false。</span>
element<span class="token punctuation">.</span><span class="token function">isEqualNode</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//检查两个元素是否相等。</span>
element<span class="token punctuation">.</span><span class="token function">isSameNode</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 检查两个元素是否是相同的节点。</span>
element<span class="token punctuation">.</span><span class="token function">isSupported</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//如果元素支持指定特性，则返回 true。</span>
element<span class="token punctuation">.</span><span class="token function">normalize</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 合并元素中相邻的文本节点，并移除空的文本节点。</span>
element<span class="token punctuation">.</span><span class="token function">removeAttribute</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//从元素中移除指定属性。</span>
element<span class="token punctuation">.</span><span class="token function">removeAttributeNode</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//移除指定的属性节点，并返回被移除的节点。</span>
element<span class="token punctuation">.</span><span class="token function">removeChild</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//从元素中移除子节点。</span>
element<span class="token punctuation">.</span><span class="token function">replaceChild</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//替换元素中的子节点。</span>
element<span class="token punctuation">.</span><span class="token function">setAttribute</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 把指定属性设置或更改为指定值。</span>
element<span class="token punctuation">.</span><span class="token function">setAttributeNode</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 设置或更改指定属性节点。</span>
element<span class="token punctuation">.</span><span class="token function">setUserData</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//把对象关联到元素上的键。</span>
element<span class="token punctuation">.</span><span class="token function">toString</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 把元素转换为字符串。</span>
nodelist<span class="token punctuation">.</span><span class="token function">item</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//返回 NodeList 中位于指定下标的节点。</span>
</code></pre></div></div> <footer class="page-edit"><!----> <div class="last-updated"><span class="prefix">最后更新时间:</span> <span class="time">1/29/2021, 5:19:40 PM</span></div></footer> <div class="page-nav"><p class="inner"><span class="prev"><a href="/front-end/js/blob和fileReader.html" class="prev"><i aria-label="icon: left" class="anticon anticon-left"><svg viewBox="64 64 896 896" focusable="false" data-icon="left" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M724 218.3V141c0-6.7-7.7-10.4-12.9-6.3L260.3 486.8a31.86 31.86 0 0 0 0 50.3l450.8 352.1c5.3 4.1 12.9.4 12.9-6.3v-77.3c0-4.9-2.3-9.6-6.1-12.6l-360-281 360-281.1c3.8-3 6.1-7.7 6.1-12.6z"></path></svg></i>
        blob和fileReader
      </a></span> <span class="next"><a href="/front-end/js/getParamName.html">
        getParamName
        <i aria-label="icon: right" class="anticon anticon-right"><svg viewBox="64 64 896 896" focusable="false" data-icon="right" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M765.7 486.8L314.9 134.7A7.97 7.97 0 0 0 302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 0 0 0-50.4z"></path></svg></i></a></span></p></div> </main> <!----></div><div class="global-ui"><!----><div id="goTop" class="hide-cat" data-v-bf92849a></div></div></div>
    <script src="/assets/js/app.419c42a0.js" defer></script><script src="/assets/js/3.2e7f4496.js" defer></script><script src="/assets/js/45.45af274c.js" defer></script>
  </body>
</html>